<template>
  <div>
    <!-- 底部按钮 -->
    <div class="bottombay">
      <ul>
        <!-- 首页 -->
        <div @click="changes(1)" :class="{ con: 1 == num }">
          <router-link tag="li" to="home">
            <div class="iconfont icon-shouye"></div>
            <div class="text">首页</div>
          </router-link>
        </div>
        <!-- 手记 -->
        <div @click="changes(2)" :class="{ con: 2 == num }">
          <router-link tag="li" to="NoteFun">
            <div class="iconfont icon-suishouji"></div>
            <div class="text">手记</div>
          </router-link>
        </div>
        <!-- 搜索 -->
        <div @click="changes(3)" :class="{ con: 3 == num }">
          <router-link tag="li" to="SearchFun">
            <div class="iconfont icon-sousuo"></div>
            <div class="text">搜索</div>
          </router-link>
        </div>
        <!-- 课堂 -->
        <div @click="changes(4)" :class="{ con: 4 == num }">
          <router-link tag="li" to="ClassroomFun">
            <div class="iconfont icon-ketang"></div>
            <div class="text">课堂</div>
          </router-link>
        </div>
        <!-- 我的 -->
        <div @click="changes(5)" :class="{ con: 5 == num }">
          <router-link tag="li" to="MyFun">
            <div class="iconfont icon-wode"></div>
            <div class="text">我的</div>
          </router-link>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    changes(key) {
      this.num = key;
      console.log(key, "123456");
    },
  },
};
</script>

<style lang="less" >
.bottombay {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 50px;
  background-color: #fff;
  z-index: 10;
  ul {
    display: flex;
    height: 45px;
    justify-content: space-around;
    li {
      display: flex;
      height: 50px;
      // line-height: 45px;
      flex-direction: column;
      .iconfont {
        height: 15px;
        margin: 3px auto 0px;
        font-size: 20px;
      }
      .text {
        height: 20px;
        line-height: 40px;
        font-size: 12px;
      }
    }
    .con {
      color: black;
      font-weight: 600;
    }
  }
}
</style>